<template>
	<van-nav-bar class="common-tabbar" fixed placeholder left-arrow left-text="用户信息" @click-left="back">
	</van-nav-bar>
	<div class="userinfo-page">
		<div class="avatar">
		<van-uploader v-model="fileList" :after-read="uploadImg" reupload max-count="1"  :deletable="false" />
		</div>

		<div class="item">
			<input type="text" :value="userInfo.mobile" readonly />
		</div>
		<div class="item">
			<input type="text" v-model="userInfo.nickname" />
		</div>

		<van-cell-group>
			<van-cell title="生日" :value="userInfo.birthday?userInfo.birthday.join('-'):'请选择'"
				@click="birthdayPopupShow=true" />
			<!--  弹出层 -->
			<van-popup v-model:show="birthdayPopupShow" position="bottom" :style="{ height: '40%' }">
<!-- 插槽 -->
				<van-date-picker v-model="userInfo.birthday" title="选择日期" :min-date="new Date(1930, 0, 1)"
					:max-date="new Date(2025, 0, 1)" @cancel="birthdayPopupShow=false"
					@confirm="confirmBirthdayPicker" />

			</van-popup>
			<!--  弹出层 结束-->
			
			
		<van-cell title="地址" :value="userInfo.address||'请选择'"
			@click="addressPopupShow=true" />
		<!--  弹出层 -->
		<van-popup v-model:show="addressPopupShow" position="bottom" :style="{ height: '40%' }">
		
		<van-area v-model="userInfo.addressCode" title="标题"
		 
		 @cancel="addressPopupShow=false"
		 @confirm="confirmAddressPicker"
		 
		 :area-list="areaList" />
		
		</van-popup>
		<!--  弹出层 结束-->	
			
			

		</van-cell-group>



		<van-button round block @click="submit">
			提交
		</van-button>


	</div>

</template>

<script setup>
	import {
		ref,
		onActivated
	} from 'vue'
	import {
		updateUser
	} from '@/api/user'
	import {
		upload
	} from '@/api/upload'
	import {
		showToast
	} from 'vant';
	import {
		useRouter
	} from 'vue-router';
	import { areaList } from '@vant/area-data';// 省市县三级联动数据包 json格式
import {useUserStore} from '@/stores/user.js'
	const router = useRouter()	
	const {setUserInfo,userInfo:userInfoData} = useUserStore()

	let userInfo = ref({});//  用户信息对象
	const birthdayPopupShow = ref(false); // 
	const addressPopupShow = ref(false); // 
	const fileList = ref([])
	

	console.log(userInfoData)
	
		if (userInfoData) {
			let _data = JSON.parse(JSON.stringify(userInfoData))// 深拷贝
			_data.birthday = _data.birthday ? _data.birthday : ['2000', '01', '01']
			userInfo.value = {
				avatar: _data.avatar,
				nickname: _data.nickname,
				mobile: _data.mobile,
				gender: _data.gender,
				address: _data.address,//  汉字
				birthday: _data.birthday,
				addressCode: _data.addressCode,  // 编码
			}
			
			fileList.value = [ { url: _data.avatar, isImage: true },]

		
		} else {
			//  得重新登陆
		}
	function submit() {
		console.log(userInfo)
		updateUser(userInfo.value).then(res => {
			console.log(res)
			if (res.code === 0) {
				showToast('修改成功');
				sessionStorage.setItem('userInfo',JSON.stringify(res.userInfo))
			
				//   存到pinia里  
             setUserInfo(res.userInfo)
		
				setTimeout(() => {
					router.back()
				}, 1000)
			} else {
				showToast('修改失败')
			}
		})

	}

	function confirmBirthdayPicker(e) {
		console.log(e.selectedValues)

		userInfo.value.birthday = e.selectedValues
		birthdayPopupShow.value = false

	}
	function confirmAddressPicker(e) {
		console.log(e)
// console.log(e.selectedOptions.map(v=>v.text))
		userInfo.value.address = e.selectedOptions.map(v=>v.text).join('-')
		userInfo.value.addressCode = e.selectedValues[2]
		addressPopupShow.value = false
		
		console.log(userInfo.value) 

	}
	
	
	
	
	
	// useBirthday()
	// useAddress() 
	// useAvatar()

	// uploadImg
	function uploadImg(e){
		console.log(e.file)// File对象  
		
		let formdata = new FormData();//  表单容器 
		formdata.append('file',e.file);// 二进制数据
		// file  key 
		// ,e.file 二进制数据 file对象 
		
		upload(formdata).then(res=>{
			if(res.data.code === 0){
				console.log(res.data.data.url)
				let img = res.data.data.url
				fileList.value[0].url= img
				userInfo.value.avatar = img
				
			}else{
				showToast(res.data.message)
			}
			
		})
		
	}
</script>

<style>
	
	.userinfo-page .avatar{
		width: 80px;
		height: 80px;
		margin: 20px auto;
		border-radius: 50%;
		overflow: hidden;
	}
</style>